<template>
    <!-- 添加、修改店员 -->
    <view class="shopassistantedit-edit-content">
        <view class="sedit-content mx-32 px-24">
            <view class="title1">
                <view>店员信息</view>
                <view v-if="staffForm.shopStaffId!=''" @click="onDelStaff" class="del">删除店员</view>
            </view>

            <view class="container pb-32 bg-white f-28">
                <view class="cell">
                    <view class="title mr-12">店员姓名</view>
                    <up-input placeholder="请输入店员姓名" :border="'surround'" v-model="staffForm.name"></up-input>
                </view>
                <view class="cell">
                    <view class="title mr-12">手机号</view>
                    <up-input placeholder="请输入手机号" :border="'surround'" type="number" v-model="staffForm.mobile"></up-input>
                </view>
                <view class="cell">
                    <view class="title mr-12">密码</view>
                    <up-input placeholder="请输入密码" :border="'surround'" v-model="staffForm.password"></up-input>
                </view>
                <view class="cell" @click="onRoleShow">
                    <view class="title mr-12">角色</view>
                    <view class="roleinfo flex items-center justify-between">
                        <view>{{ staffForm.role==0?'店长':RoleValue(staffForm.role) }}</view>
                        <view class="choosetit">选择</view>
                    </view>
                </view>
                <view class="cell justify-between">
                    <view class="title mr-12">充值操作权限</view>
                    <up-switch v-model="staffForm.isOpaAuth" activeColor="rgba(214, 142, 68, 1)" inactiveColor="rgb(230, 230, 230)" size="18"></up-switch>
                </view>
                <view class="cell justify-between">
                    <view class="title mr-12">员工表现权限</view>
                    <up-switch v-model="staffForm.isOpaStaffDataShowAuth" activeColor="rgba(214, 142, 68, 1)" inactiveColor="rgb(230, 230, 230)" size="18"></up-switch>
                </view>
                <view class="cell justify-between">
                    <view class="title mr-12">销售统计权限</view>
                    <up-switch v-model="staffForm.isOpaSalesDataShowAuth" activeColor="rgba(214, 142, 68, 1)" inactiveColor="rgb(230, 230, 230)" size="18"></up-switch>
                </view>
                <view class="cell justify-between">
                    <view class="title mr-12">数据统计权限</view>
                    <up-switch v-model="staffForm.isOpaDataCountShowAuth" activeColor="rgba(214, 142, 68, 1)" inactiveColor="rgb(230, 230, 230)" size="18"></up-switch>
                </view>
                <view class="cell justify-between">
                    <view class="title mr-12">商品入库权限</view>
                    <up-switch v-model="staffForm.isOpaProduct" activeColor="rgba(214, 142, 68, 1)" inactiveColor="rgb(230, 230, 230)" size="18"></up-switch>
                </view>
            </view>
        </view>
        <view class="button-box px-48">
			<view class="exit-login bg2" @click="onAddEditStaff" :disabled="loading">
                <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>立即保存</text>
            </view>
		</view>
        <up-picker :show="show" :columns="columns" keyName="label" @cancel="cancel" @confirm="confirm" @change="change"></up-picker>
    </view>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
import { getUserInfo } from "@/service";
import { shopApi } from "@/api";
import test from '@/superant/helper/test.js';
import $helper from '@/superant/helper';

const loading = ref(false);
const staffForm = reactive({
    isOpaAuth: false,
    mobile: "",
    name: "",
    password: "",
    role: 0,
    shopStaffId:'',
    isOpaStaffDataShowAuth:false,
    isOpaSalesDataShowAuth:false,
    isOpaDataCountShowAuth:false,
    isOpaProduct : false
});
let show = ref(false);
let columns = reactive([[
{
      label: '店长',
      id: 0
    },
    {
      label: '店员',
      id: 1
    },
    // {
    //   label: '专营商',
    //   id: 2
    // }
]])
function RoleValue(val) {
	if (val==0) {
        return '店长'
    }else if (val == 1){
        return '店员'
    }else if (val == 2) {
        return '专营商'
    }
}  
onLoad((options) => {
    console.log("url参数", options);
    uni.setNavigationBarTitle({
        title: options.item ? "编辑店员资料" : "添加店员"
    });
    // 编辑回显
    if (options.item) {
        console.log(JSON.parse(options.item))
        staffForm.shopStaffId = JSON.parse(options.item).shopStaffId;
        staffForm.isOpaAuth=JSON.parse(options.item).isOpaAuth
        staffForm.mobile=JSON.parse(options.item).mobile
        staffForm.name=JSON.parse(options.item).name
        staffForm.password=JSON.parse(options.item).password
        staffForm.role=JSON.parse(options.item).role
        staffForm.isOpaStaffDataShowAuth=JSON.parse(options.item).isOpaStaffDataShowAuth
        staffForm.isOpaSalesDataShowAuth=JSON.parse(options.item).isOpaSalesDataShowAuth
        staffForm.isOpaDataCountShowAuth=JSON.parse(options.item).isOpaDataCountShowAuth
        staffForm.isOpaProduct=JSON.parse(options.item).isOpaProduct
    }
});

const onRoleShow = () => {
    show.value = true;
};
const change = (e)=>{
    // console.log('change', e);
    // staffForm.role = columns[0][e.index].id
}
const confirm=(e)=>{
    
    staffForm.role = e.value[0].id
    console.log('confirm',staffForm.role);
    show.value = false
}
const cancel = ()=>{
    // console.log('cancel');
    show.value = false
}

const onAddEditStaff = () => {
    if (staffForm.name.trim() == "") {
        uni.showToast({
            title: "请输入姓名",
            icon: "none",
            mask: true
        });
        return;
    }
    if (staffForm.mobile.trim() == "") {
        uni.showToast({
            title: "请输入手机号",
            icon: "none",
            mask: true
        });
        return;
    }
    if (!test.mobile(staffForm.mobile)) {
        $helper.toast('请输入正确的手机号');
        return;
    }

    
    if (!staffForm.shopStaffId) {
        if (staffForm.password.trim() == "") {
            uni.showToast({
                title: "请输入密码",
                icon: "none",
                mask: true
            });
            return;
        }
    }
    console.log(staffForm.role,'staffForm.role')
    if (staffForm.role!=0) {
        if(!staffForm.role){
            uni.showToast({
                title: "请选择角色",
                icon: "none",
                mask: true
            });
            return;
        }
    }
    let params = {
        isOpaAuth: staffForm.isOpaAuth,
        mobile: staffForm.mobile,
        name:staffForm.name,
        password: staffForm.password,
        role: staffForm.role,
        isOpaStaffDataShowAuth: staffForm.isOpaStaffDataShowAuth,
        isOpaSalesDataShowAuth: staffForm.isOpaSalesDataShowAuth,
        isOpaDataCountShowAuth: staffForm.isOpaDataCountShowAuth,
        isOpaProduct: staffForm.isOpaProduct,
    }
    if (staffForm.shopStaffId) {
        params.shopStaffId = staffForm.shopStaffId;
    }
    loading.value = true;
    shopApi.SHOPSAVEOPUPDATESTAFF(params).then((res) => {
        loading.value = false;
        if (res.code == 200) {
            if (staffForm.shopStaffId) {
                uni.showToast({
                    title: "修改成功",
                    icon: "success",
                    mask: true
                });
            } else {
                uni.showToast({
                    title: "新增成功",
                    icon: "success",
                    mask: true
                });
            }
            setTimeout(()=>{
                uni.navigateBack();
            },1000)
           
        }else{
            uni.showToast({
                title: res.errMsg,
                icon: "none",
                mask: true
            });
        }
    });
};
const onDelStaff=()=>{
    uni.showModal({
        title: '提示',
        content: '确定删除该店员吗？',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
                shopApi.SHOPDELETESTAFFBYID({id:staffForm.shopStaffId}).then((res)=>{
                    if(res.code==200){
                        uni.showToast({
                            title: '删除店员成功',
                            icon: "none",
                            mask: true
                        });
                        setTimeout(()=>{
                            uni.navigateBack();
                        },1000)
                    }else{
                        uni.showToast({
                            title: res.errMsg,
                            icon: "none",
                            mask: true
                        });
                    }
                })
            }
        }
        
    })
}
</script>

<style lang="scss">
page {
    background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.shopassistantedit-edit-content {
    padding: 24rpx;
    box-sizing: border-box;
    .sedit-content{
        background-color: #ffffff;
        border-radius: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;
        .title1{
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .cell {
        display: flex;
        align-items: center;
        padding: 20rpx 0rpx;
        // border-bottom: 2rpx solid #E6E6E6;
        .roleinfo{
            width: calc(100% - 140rpx);
            color: #303133;
            margin-left: 18rpx;
        }
        .title {
            width: 140rpx;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            color: rgba(0, 0, 0, 0.6);
        }
        .choosetit{
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            color: rgba(255, 0, 0, 1);
        }
    }

    .icon-width {
        width: 40rpx;
        height: 40rpx;
        vertical-align: text-top;
    }

    .default-tip {
        color: #606266;
        vertical-align: text-top;
    }

    .button-box{
		width: 100%;
		position: fixed;
		bottom: 70rpx;
		left: 0;
	}
	.exit-login {
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #D68E44;
		color: #ffffff;
		text-align: center;
		border-radius: 64px;
		font-size: 32rpx;
		margin-bottom: 40rpx;
        display: flex;
        justify-content: center;
	}
	.bg1{
		background: rgba(253, 236, 219, 1);
		color: rgba(145, 74, 0, 1);
	}
	.exit-login:after {
		border: none;
	}

    & :deep(.u-input) {
        border: 0;
        background: #ffffff !important;
    }

    & :deep(.uni-input-wrapper) {
        font-size: 28rpx;
    }

    & :deep(.u-textarea) {
        border: 0;
    }
}
</style>